<!-- 挂号 -->
<template>
	<view class="container">
		<view class="doctor-list" v-for="(item, index) in doctorList" :key="index">
			<view class="doctor-list-image">
				<image src="/static/icon/icon_avatar.png" mode="aspectFill"></image>
			</view>
			<view class="doctor-list-content">
				<view class="doctor-title-content">
					<view class="row-start">
						<view class="doctor-name">{{item.doctorName}}</view>
						<view class="doctor-register">
							{{options?.type}}
						</view>
					</view>
					<view class="doctor-department">{{options?.department}}</view>
					<view class="doctor-advantage">￥{{registrationFee}}元</view>
				</view>
				
				<view class="right-content">
					<view class="register-btn" @click="onRegister(item)">挂号</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app";
	import { reactive, ref } from "vue";
	import { getCurrentInstance } from 'vue';
	
	import {
		seldoctor,
		seltymo
	} from "@/api/index.js"
	
	const doctorList = ref([]);
	const options = ref(null);
	// 挂号费
	const registrationFee = ref('')
	
	onLoad((params) => {
		console.log('params', params)
		options.value = params;
		let data = uni.getStorageSync('Department')
		seldoctor(data).then(res => {
			doctorList.value = res;
			
			seltymo({registeredId:data.registeredid}).then(seltymoRes => {
				registrationFee.value = seltymoRes;
			})
		})
	})
	
	function onRegister(item) {
		console.log("item",item)
		let data = {
			name: item.doctorName,
			type: options.value?.type,
			department: options.value?.department,
			registrationFee:registrationFee.value,
			doctorId:item.doctorId
		}
		uni.navigateTo({
			url: `/view/register/registerDetail/index?data=${JSON.stringify(data)}`
		})
		
		console.log("dat", data)
	}
</script>

<style lang="scss">
	@import '../../../uni.scss';
	page {
		background-color: #f5f5f5;
	}
	.row-start {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.container {
		padding: 30rpx;
		// 医生列表
		.doctor-list {
			// border-radius: 22rpx;
			/* White */
			background: #FFFFFF;
			// box-shadow: 0rpx 8rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			
			padding: 28rpx;
			// border-bottom: 1rpx solid #D8D8D8;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			
			&:last-child {
				border-bottom: none;
				margin-bottom: 0;
			}
			
			
			.doctor-list-image {
				width: 98rpx;
				height: 98rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.doctor-list-content {
				margin-left: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				flex: 1;
				.doctor-title-content {
					.doctor-name {
						font-family: '思源黑体';
						font-size: 28rpx;
						font-weight: normal;
						line-height: normal;
						letter-spacing: normal;
						/* 正文色/正文色 */
						color: #1A1A1A;
				
					}
					.doctor-register {
						font-family: '思源黑体';
						font-size: 26rpx;
						font-weight: normal;
						line-height: normal;
						letter-spacing: normal;
						/* 主要色/主要色 */
						color: #FF8833;
						
						border: 1rpx solid #FF8833;
						border-radius: 22rpx;
						margin-left: 10rpx;
						padding: 0 14rpx;
					}
				}
				
				.doctor-department {
					font-family: '思源黑体';
					font-size: 26rpx;
					font-weight: normal;
					line-height: normal;
					letter-spacing: normal;
					/* 描边色/描边色辅助 */
					color: #AAAAAA;
				}
				.doctor-advantage {
					font-family: '思源黑体';
					font-size: 26rpx;
					font-weight: normal;
					line-height: normal;
					letter-spacing: normal;
					/* 描边色/描边色辅助 */
					color: #AAAAAA;
					
				}
				
				
				
				.right-content {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-end;
					.register-remaining {
						font-family: 思源黑体;
						font-size: 22rpx;
						font-weight: normal;
						line-height: normal;
						letter-spacing: normal;
						color: #FF8833;
					}
					.register-btn {
						font-family: '思源黑体';
						font-size: 28rpx;
						font-weight: normal;
						line-height: normal;
						letter-spacing: normal;
						/* 主要色/主要色 */
						color: $color-main;
						
						border: 1rpx solid $color-main;
						padding: 6rpx 40rpx;
						border-radius: 22rpx;
						
						text-align: center;
						
						margin-top: 24rpx;
					}
				}
				
			}
			
		}
	}
</style>